<template>
  <el-card>
    <div slot="header">
      <span><i class="fa-solid fa-floppy-disk" /> 磁盘状态</span>
    </div>
    <div class="el-table el-table--enable-row-hover el-table--medium">
      <table cellspacing="0" style="width: 100%;">
        <thead>
          <tr>
            <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
          </tr>
        </thead>
        <tbody v-if="disk">
          <tr v-for="(sysFile, index) in disk" :key="index">
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
            <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Disk',
  props: {
    disk: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
